<template>
  <div class="content">
    <div class="cloud-header">
      <h2>订单列表</h2>
    </div>
    <div class="cloud-body">
      <!-- 订单筛选 -->
      <div class="orders-screen">
        <!-- <p><label>订单类型：</label><span><Button noBorder :text-color="screen.type == 'all'?'primary' :'default'" @click="intClick('type','all')">全部</Button><Button noBorder :text-color="screen.type == 'pre'?'primary' :'default'" @click="intClick('type','pre')">预订单</Button></span></p> -->
        <p>
          <label>下单日期：</label>
          <span>
            <Button noBorder :text-color="screen.date == 'all'?'primary' :'default'" @click="setDate('all')">全部</Button>
            <Button noBorder :text-color="screen.date == 'three'?'primary' :'default'" @click="setDate('three')">近三日</Button>
            <DateRangePicker class="orders-date" v-model="time" @confirm="setDate('time')" :format="format" placeholder="时间区间"></DateRangePicker>
          </span>
        </p>
        <p>
          <label>订单状态：</label>
          <span>
            <Button noBorder :text-color="screen.status == 'all'?'primary' :'default'" @click="intClick('status','all')">全部</Button>
            <Button noBorder :text-color="screen.status == 'going'?'primary' :'default'" @click="intClick('status','going')">进行中</Button>
            <Button noBorder :text-color="screen.status == 'end'?'primary' :'default'" @click="intClick('status','end')">已完成</Button>
            <Button noBorder :text-color="screen.status == 'cancel'?'primary' :'default'" @click="intClick('status','cancel')">已取消</Button>
          </span>
        </p>
      </div>
      <div>
        <div class="list-item" v-for="(item, index) in datas" :key="index">
          <div class="zent-loading zent-loading--block zent-loading--has-children" data-zv="8.5.0" style="height: initial;">
            <div class="list-item-header">
              <div class="list-item-header-row">
                <div>
                  <span>订单号 : {{item.order_sn}}</span>
                  <span style="margin-left: 20px;">下单时间 : {{item.creation_time}}</span>
                  <span style="margin-left: 20px;">订单状态 : {{item.order_status === 0?'进行中':item.order_status === 3?'已取消':'已核销'}}</span>
                  <span style="margin-left: 20px;">预计到店时间 : {{item.buyer_info.plan_time || '无'}}</span>
                </div>
                <div class="operation-btn">
                  <a @click="intToDetails(item.order_sn)">查看详情</a>
                </div>
              </div>
            </div>
            <table class="list-item-body-table">
              <tbody class="list-item-body" :class="item.order_status == 1 ? 'list-item-complete' : ''">
                <tr class="list-item-row" v-for="content,key in item.goods_list">
                  <td class="goods-cell">
                    <div class="goods-item-cell">
                      <img class="goods-info__img" :src="content.image_list[0]" alt="">
                      <div class="goods-info__info">
                        <div class="goods-title">
                          <a>
                            {{content.name}}
                          </a>
                        </div>
                        <div class="goods-skus">
                          <span class="goods-sku">
                            {{content.select.spce_name}}
                          </span>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td class="goods-price-cell" rowspan="1">
                    金额 : <span>{{content.price}}</span>
                  </td>
                  <td class="pay-price-cell" rowspan="1">
                    数量 : <span>{{content.number}}</span>
                  </td>
                  <td class="pay-price-cell" v-if="item.order_status == 1">
                    核销时间 : <span>{{item.update_time}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div style="width: 100%;text-align: center;color: #999999;padding: 10px;" v-if="datas.length < 1">暂无数据</div>
        <Pagination style="margin-top: 20px;" v-model="pagination" align="center" @change="currentChange" small></Pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import date from '@/utils/datetime'
// import empty from './empty.vue'
export default {
  components: {
    // empty
  },
  data() {
    return {
      value: 1,
      loading: false,
      datas: [],
      time: {},
      _uniqueid: '',
      creation_time: '',
      screen: {
        date: 'all',
        status: 'all',
      },
      format: 'YYYY-MM-DD',
      //分页数据
      pagination: {
        page: 1,
        size: 10,
        total: 10
      }
    };
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 页面渲染前
   * @return {[type]} [description]
   */
  created() {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this._uniqueid = this.$cloud.userInfo()._uniqueid;
    this.dataCount();
    this.getDatas();
  },
  methods: {
    //获取订单数据
    getDatas() {
      let where = {}
      if (this.screen.date !== 'all') {
        where.creation_time = this.creation_time
      }
      if (this.screen.status !== 'all') {
        where.order_status = this.screen.status === 'going' ? 0 : this.screen.status === 'cancel' ? 3 : 1;
      }
      this.$cloud.orders().all(where,this.pagination.page,this.pagination.size).then(data => {
        this.datas = data;
      }).catch(error => {

      });
    },
    //获取订单数量
    dataCount() {
      let where = {_uniqueid:this._uniqueid}
      if (this.screen.date !== 'all') {
        where.creation_time = this.creation_time
      }
      if (this.screen.status !== 'all') {
        where.order_status = this.screen.status === 'going' ? 0 : this.screen.status === 'cancel' ? 3 : 1;
      }
      this.$cloud.orders().total(where).then(data => {
        this.pagination.total = data
      }).catch(error => {

      });
    },
    //分页
    currentChange(value) {
      this.pagination = value
      this.getDatas()
    },

    //时间设置
    setDate(value) {
      let start_time = ''
      let end_time = ''
      this.screen.date = value
      switch (value) {
        case 'all':
          this.time = {}
          start_time = '2020-01-01 00:00:00';
          end_time = date.getDateTime();
          break;
        case 'three':
          this.time = {}
          let now_time = date.getDate() + " 00:00:00";
          start_time = date.getBefore(now_time, 2, 'date') + " 00:00:00";
          end_time = date.getDateTime();
          break;
        case 'time':
          start_time = this.time.start + " 00:00:00"
          end_time = this.time.end + " 23:59:59"
          break;
      }
      this.creation_time = ['>', start_time, '<', end_time];
      this.dataCount();
      this.getDatas()
    },

    /**
     * 点击事件
     * @return {[type]} [description]
     */
    intClick(params, value) {
      this.screen[params] = value;
      this.dataCount();
      this.getDatas()
    },

    /**
     * 进入订单详情
     * @return {[type]} [description]
     */
    intToDetails(order_sn) {
      this.$router.push({ path: '/orders/orderDetails', query: { order_sn: order_sn } })
    }
  }
};

</script>
<style lang="less" scoped="true">
.list-item {
  margin: 16px 0;
}

.zent-loading--block {
  position: relative;
}

.list-item-header {
  background-color: #f7f8fa;
  border: 1px solid #ebedf0;
  border-bottom: 0;
  padding: 16px;
  color: #323233;
}

.list-item-header div {
  display: inline-block;
}

.list-item-header .list-item-header-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.list-item-header .operation-btn {
  word-break: keep-all;
}

.list-item-body-table {
  width: 100%;
  border-collapse: collapse;
  color: #323233;
}

.list-item-body,
.list-item-body .list-item-row {
  width: 100%;
}

.list-item-body,
.list-item-body .list-item-row {
  width: 100%;
}

.list-item-body .goods-cell {
  width: 30%;
  padding: 10px;
}

.list-item-body-table td {
  border: 1px solid #ebedf0;
  box-sizing: border-box;
  width: 10%;
  padding: 10px 5px;
  text-align: center;
  vertical-align: middle;
}

.list-item-body .goods-item-cell {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.list-item-body .goods-item-cell .goods-info__img {
  width: 60px;
  height: 60px;
  max-width: 60px;
  max-height: 60px;
  min-width: 60px;
  margin-right: 10px;
  position: relative;
}

img::before {
  position: absolute;
  display: block;
  content: '';
  top: -7px;
  left: -7px;
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  background-color: #e6e6e6;
  border: 2px dotted #c8c8c8;
  border-radius: 5px;
}

img::after {
  position: absolute;
  display: block;
  content: '(>_<)';
  top: 50%;
  left: 50%;
  margin-top: -.5em;
  margin-left: -1.5em;
  height: 1em;
  line-height: 1em;
  width: 3em;
  color: #646464;
  text-align: center;
}

.list-item-body .goods-item-cell .goods-info__info {
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: left;
}

.list-item-body .goods-item-cell .goods-info__info .goods-title {
  margin-bottom: 10px;
  word-break: break-all;
}

.list-item-body .goods-item-cell .goods-info__info .goods-skus {
  margin-bottom: 4px;
}

.list-item-body .goods-item-cell .goods-info__price {
  min-width: 120px;
  text-align: right;
  box-sizing: border-box;
}

.list-item-body .goods-price-cell {
  width: 30%;
  min-width: 105px;
  word-break: break-all;
}

.list-item-body .pay-price-cell {
  width: 30%;
}
.list-item-complete td{
  width: 25% !important;
}

.orders-screen {
  a {
    display: inline-block;
    margin: 0 10px;
  }

  .orders-date,
  .orders-date .h-input input {
    color: #3788ee !important;
  }
}

</style>
